<template>
	<view class="container">
		<hx-navbar :back="false" :backgroundColor="[255, 255, 255]" :fixed="true">
			<view slot="left" class="flex justify-center align-center container-top" style="width:100%;margin: 0 45rpx;">
				<view class="cuIcon-back" style="font-size: 36rpx;position: absolute;left: 30rpx;" @tap="back">
				</view>
				<view class="" style="font-size: 36rpx;">
					红玉兰
				</view>
				<view class="flex align-center" style="position: absolute;right: 30rpx;">
					<i class="fa fa-star" :class="collection?'yellow':''" @tap="shoucang" style="font-size: 40rpx;margin: 0 30rpx 0 10rpx;" aria-hidden="true"></i>
					<i class="fa fa-share-alt" style="font-size: 40rpx;" aria-hidden="true"></i>
				</view>
			</view>
		</hx-navbar>
		<view class="swiper-box">
			<swiper class="swiper" indicator-dots="true" :interval="interval" :duration="duration" indicator-color="rgba(255, 255, 255,1)" indicator-active-color="#26C594" circular="true" active-class="ygys">
			   <block v-for="(item,i) in banner" :key="i">
				<swiper-item>
					<image src="../../static/imgs/gyxqlb1.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			   </block>
			</swiper>
			<view class="guankan">
				2562<i class="fa fa-eye" aria-hidden="true"></i>
			</view>
		</view>
		<view class="paddings main-text">
			<view class="name">
				红玉兰
			</view>
			<view class="address">
				<i class="fa fa-map-marker" aria-hidden="true"></i>河南省南阳市南召县
			</view>
			<view class="text-right text-gray flex justify-between align-center text-sm">
				<view class="">
					2020-10-09
				</view>
				<view class="">
					<text style="font-size: 30rpx;"><text class="text-sm">￥</text><text class="text-bold">1600</text></text>/株
				</view>
				
			</view>
		</view>
		<view class="ytx"></view>
		<view class="flex shop-top justify-between">
			<view class="flex">
				<view class="shop-img">
					<image src="../../static/imgs/shop1.png" mode="aspectFit"></image>
				</view>
				<view class="shop-content">
					<view class="name">
						多多果园苗木有限公司
					</view>
					<view class="text-number text-sm">
						月销3456 商品470 关注254
					</view>
					<view class="bianqian flex">
						<text class="cu-tag line-red sm radius">国王会员</text>
						<text class="cu-tag line-yellow sm radius">企业认证</text>
						<text class="cu-tag line-blue sm radius">实名认证</text>
					</view>
				</view>
			</view>
			<view class="shop-button flex align-center">
				<view class="">
					进店逛逛
				</view>
			</view>
		</view>
		<view class="ytx"></view>
		<view class="paddings">
			<view class="title">
				参数
			</view>
			<view class="parameter">
				<view class="flex">
					<view class="flex-left">
						数量：
					</view>
					<view class="">
						5000株（1株起购）
					</view>
				</view>
				<view class="flex">
					<view class="flex-left">
						杆径：
					</view>
					<view class="">
						5~50cm
					</view>
				</view>
				<view class="flex">
					<view class="flex-left">
						高度：
					</view>
					<view class="">
						300~300cm
					</view>
				</view>
				<view class="flex">
					<view class="flex-left">
						冠幅：
					</view>
					<view class="">
						150~150cm
					</view>
				</view>
				<view class="flex">
					<view class="flex-left">
						分枝点：
					</view>
					<view class="">
						120~120cm
					</view>
				</view>
			</view>
		</view>
		<view class="ytx"></view>
		<view class="paddings" style="padding-bottom: 0;">
			<view class="title">
				详情
			</view>
			<view class="">
				<image src="../../static/imgs/gyxqdt.jpg" mode="widthFix" style="width: 100%;"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="flex justify-between">
				<view class="">
					仅会员可使用联系功能，请开通会员
				</view>
				<view class="">
					去开通会员<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="button flex">
				<view class="bg-yellow">
					<i class="fa fa-phone" aria-hidden="true"></i>电话联系
				</view>
				<view class="bg-green">
					<i class="fa fa-commenting" aria-hidden="true"></i>在线沟通
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import 'static/css/font-awesome.min.css';
export default {
    data() {
        return {
            banner: ['color1', 'color2', 'color3'],
            interval: 2000,
            duration: 500,
            collection:false
        };
    },
    methods: {
        back() {
            uni.navigateBack({});
        },
        shoucang(){
		    this.collection=!this.collection;
        }
    },
};
</script>

<style>
	.yellow {
		color: #FFDC69;
	}
	.ytx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}
	.swiper-box{
		position: relative;
	}
	.swiper{
		width: 100%;
		height: 750rpx;
	}
	 .guankan{
		width: 130rpx;
		height: 48rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 22rpx;
		background-color: rgba(255,255,255,0.7);
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
		z-index: 20;
	}
	 .guankan i{
		margin-left: 5rpx;
	}
	.ygys{
		bottom: 40rpx;
	}
	.text-right text {
		color: #FE522E;
	}
	.main-text .name{
		font-size: 30rpx;
		font-weight: bold;
	}
	.paddings{
		padding: 30rpx 20rpx;
	}
	.paddings .title{
		padding: 5rpx 0 35rpx 0;
		font-size: 32rpx;
		font-weight: bold;
	}
	.address{
		font-size: 22rpx;
		color: #999;
		margin: 20rpx 0 10rpx 0;
	}
	.address i{
		margin-right: 8rpx;
	}
	.shop-top {
		padding: 30rpx 20rpx;
	}
	
	.shop-top image {
		width: 128rpx;
		height: 128rpx;
		border-radius: 15rpx;
	}
	.shop-content {
		padding: 0rpx 20rpx;
	
	}
	
	.shop-content .name {
		font-size: 36rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.shop-button view {
		width: 140rpx;
		height: 54rpx;
		border-radius: 15rpx;
		background-color: #F3635A;
		color: #FFFFFF;
		line-height: 54rpx;
		text-align: center;
		font-size: 30rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}
	.shop-button view i{
		margin-right: 20rpx;
	}
	
	.shop-content .text-sm {
		color: #666;
	}
	
	.shop-content>view+view {
		margin-top: 10rpx;
	}
	.line-blue {
		color: #22AFF8;
	}
	.cu-tag.sm {
		position: relative;
		left: -8rpx;
		height: 40rpx;
		transform: scale(0.83);
	}
	.cu-tag+.cu-tag {
		margin-left: 0;
	}
	.line-blue {
		color: #22AFF8;
	}
	.parameter .flex{
		font-size: 26rpx;
	}
	.parameter .flex+.flex{
		margin-top: 20rpx;
	}
	.parameter .flex .flex-left{
		color: #999999;
		width: 17%;
	}
	
	.bottom{
		width: 694rpx;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #FFF7DC;
		border-radius: 30rpx 30rpx 50rpx 50rpx;
	}
	.bottom .justify-between{
		font-size: 20rpx;
		color: #E67122;
		padding: 15rpx 50rpx;
		transform: scale(.9);
	}
	.bottom .button view{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottom .button{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.bottom .button i{
		font-size: 50rpx;
		margin-right: 10rpx;
	}
	.bg-yellow{
		background-color: #F3AD5A;
		color: #FFFFFF;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
	}
	.bg-green{
		background-color:#26C594;
		border-radius: 0rpx 50rpx 50rpx 0rpx;
	}
</style>
